<template>
    <div class="front">
        <el-tabs v-model="activeTabName" @tab-click="handleClick">
            <el-tab-pane label="暗码规则1" name="configOne">
                <el-form :model="cipherForm1">
                    <el-form-item label="数位0替换" :required="true">
                        <el-input v-model="cipherForm1.config.numMap['0']" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="数位1替换" :required="true">
                        <el-input v-model="cipherForm1.config.numMap['1']" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="数位2替换" :required="true">
                        <el-input v-model="cipherForm1.config.numMap['2']" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="数位3替换" :required="true">
                        <el-input v-model="cipherForm1.config.numMap['3']" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="数位4替换" :required="true">
                        <el-input v-model="cipherForm1.config.numMap['4']" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="数位5替换" :required="true">
                        <el-input v-model="cipherForm1.config.numMap['5']" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="数位6替换" :required="true">
                        <el-input v-model="cipherForm1.config.numMap['6']" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="数位7替换" :required="true">
                        <el-input v-model="cipherForm1.config.numMap['7']" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="数位8替换" :required="true">
                        <el-input v-model="cipherForm1.config.numMap['8']" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="数位9替换" :required="true">
                        <el-input v-model="cipherForm1.config.numMap['9']" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-switch v-model="cipherForm1.status" :disabled="disabled" active-value="1"
                                   inactive-value="0" active-text="是" inactive-text="否" inline-prompt />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleUpdateCipher()">修改</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="暗码规则2" name="configTwo">
                <el-scrollbar style="height: 85vh">
                    <el-form :inline="true" :model="cipherForm2">
                        <el-card class="config-card">
                            <div>
                                <div>设置一：设置总长度</div>
                            </div>
                            <el-divider/>
                            <div>
                                <el-form-item label="长度" :required="true">
                                    <el-input v-model="cipherForm2.config.totalLength" type="text"></el-input>
                                </el-form-item>
                                <el-form-item label="混淆码" :required="true">
                                    <el-radio v-model="cipherForm2.config.mixType" label="random">字母随机大小写</el-radio>
                                    <el-radio v-model="cipherForm2.config.mixType" label="upperCase">字母大写</el-radio>
                                    <el-radio v-model="cipherForm2.config.mixType" label="lowerCase">字母小写</el-radio>
                                </el-form-item>
                            </div>
                        </el-card>
                        <el-card class="config-card">
                            <div>
                                <div>设置二：请设置四位隐藏价格字符的自定义位置</div>
                            </div>
                            <el-divider/>
                            <div>
                                <el-form-item label="字符一：表示百千万单位的字母位置为" :required="true">
                                    <el-input v-model="cipherForm2.config.unitPosition" type="text"></el-input>
                                </el-form-item>
                                <el-form-item label="字符二：表示价格的第一位数字位置为" :required="true">
                                    <el-input v-model="cipherForm2.config.numPosition1" type="text"></el-input>
                                </el-form-item>
                                <el-form-item label="字符三：表示价格的第二位数字位置为" :required="true">
                                    <el-input v-model="cipherForm2.config.numPosition2" type="text"></el-input>
                                </el-form-item>
                                <el-form-item label="字符四：表示价格的第三位数字位置为" :required="true">
                                    <el-input v-model="cipherForm2.config.numPosition3" type="text"></el-input>
                                </el-form-item>
                            </div>
                        </el-card>
                        <el-card class="config-card">
                            <div>
                                <div>设置三：表示价格数字抽象化设置(默认为原数字)</div>
                            </div>
                            <el-divider/>
                            <div>
                                <el-form-item label="数位0替换" :required="true">
                                    <el-input v-model="cipherForm2.config.numMap['0']" type="text"/>
                                </el-form-item>
                                <el-form-item label="数位1替换" :required="true">
                                    <el-input v-model="cipherForm2.config.numMap['1']" type="text"/>
                                </el-form-item>
                                <el-form-item label="数位2替换" :required="true">
                                    <el-input v-model="cipherForm2.config.numMap['2']" type="text"/>
                                </el-form-item>
                                <el-form-item label="数位3替换" :required="true">
                                    <el-input v-model="cipherForm2.config.numMap['3']" type="text"/>
                                </el-form-item>
                                <el-form-item label="数位4替换" :required="true">
                                    <el-input v-model="cipherForm2.config.numMap['4']" type="text"/>
                                </el-form-item>
                                <el-form-item label="数位5替换" :required="true">
                                    <el-input v-model="cipherForm2.config.numMap['5']" type="text"/>
                                </el-form-item>
                                <el-form-item label="数位6替换" :required="true">
                                    <el-input v-model="cipherForm2.config.numMap['6']" type="text"/>
                                </el-form-item>
                                <el-form-item label="数位7替换" :required="true">
                                    <el-input v-model="cipherForm2.config.numMap['7']" type="text"/>
                                </el-form-item>
                                <el-form-item label="数位8替换" :required="true">
                                    <el-input v-model="cipherForm2.config.numMap['8']" type="text"/>
                                </el-form-item>
                                <el-form-item label="数位9替换" :required="true">
                                    <el-input v-model="cipherForm2.config.numMap['9']" type="text"/>
                                </el-form-item>
                            </div>
                        </el-card>
                        <el-card class="config-card">
                            <div>
                                <div>设置四：价格单位对应的字母设置</div>
                            </div>
                            <el-divider/>
                            <div>
                                <el-form-item label="个位替换" :required="true">
                                    <el-input v-model="cipherForm2.config.unitMap['1']" type="text"/>
                                </el-form-item>
                                <el-form-item label="十位替换" :required="true">
                                    <el-input v-model="cipherForm2.config.unitMap['10']" type="text"/>
                                </el-form-item>
                                <el-form-item label="百位替换" :required="true">
                                    <el-input v-model="cipherForm2.config.unitMap['100']" type="text"/>
                                </el-form-item>
                                <el-form-item label="千位替换" :required="true">
                                    <el-input v-model="cipherForm2.config.unitMap['1000']" type="text"/>
                                </el-form-item>
                                <el-form-item label="万位替换" :required="true">
                                    <el-input v-model="cipherForm2.config.unitMap['10000']" type="text"/>
                                </el-form-item>
                                <el-form-item label="十万位替换" :required="true">
                                    <el-input v-model="cipherForm2.config.unitMap['100000']" type="text"/>
                                </el-form-item>
                                <el-form-item label="百万位替换" :required="true">
                                    <el-input v-model="cipherForm2.config.unitMap['1000000']" type="text"/>
                                </el-form-item>
                                <el-form-item label="千万位替换" :required="true">
                                    <el-input v-model="cipherForm2.config.unitMap['10000000']" type="text"/>
                                </el-form-item>
                                <el-form-item label="亿位替换" :required="true">
                                    <el-input v-model="cipherForm2.config.unitMap['100000000']" type="text"/>
                                </el-form-item>
                                <el-form-item label="十亿位替换" :required="true">
                                    <el-input v-model="cipherForm2.config.unitMap['1000000000']" type="text"/>
                                </el-form-item>
                            </div>
                        </el-card>
                        <div style="float: right">
                            <div>
                                <el-form-item label="是否启用">
                                    <el-switch v-model="cipherForm2.status" :disabled="disabled" active-value="1"
                                               inactive-value="0" active-text="是" inactive-text="否" inline-prompt/>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item>
                                    <el-button type="primary" @click="handleUpdateCipher()">修改</el-button>
                                </el-form-item>
                            </div>

                        </div>
                    </el-form>
                </el-scrollbar>

            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import {reactive, ref} from "vue";
import {defineComponent,} from "vue";
import {getCipher, addCipher, updateCipher} from '@/api/setting/setting'
import {onBeforeMount} from "vue";
import {ElMessage} from "element-plus";

export default defineComponent({
    name: "Cipher",
    components: {},
    setup() {
        const activeTabName = ref('configOne')
        const disabled = ref(false)
        let cipherTypeId = 1
        const cipherForm1 = reactive({
            id: '',
            typeId: 1,
            status: 0,
            config: {
                numMap: {
                    "0": "",
                    "1": "",
                    "2": "",
                    "3": "",
                    "4": "",
                    "5": "",
                    "6": "",
                    "7": "",
                    "8": "",
                    "9": ""
                }
            }
        })
        const cipherForm2 = reactive({
            id: '',
            typeId: 2,
            status: 0,
            config: {
                totalLength: '',
                mixType: 'random',
                unitPosition: '',
                numPosition1: '',
                numPosition2: '',
                numPosition3: '',
                numMap: {
                    "0": "0",
                    "1": "1",
                    "2": "2",
                    "3": "3",
                    "4": "4",
                    "5": "5",
                    "6": "6",
                    "7": "7",
                    "8": "8",
                    "9": "9"
                },
                unitMap: {
                    "1": "",
                    "10": "",
                    "100": "",
                    "1000": "",
                    "10000": "",
                    "100000": "",
                    "1000000": "",
                    "10000000": "",
                    "100000000": "",
                    "1000000000": ""
                }
            }
        })
        const getCipherData = () => {
            getCipher(cipherTypeId).then(res => {
                if (res.code !== 200) {
                    ElMessage.error(res.msg)
                    return;
                }
                res.data.config = JSON.parse(res.data.config);
                res.data.status = res.data.status + '';
                disabled.value = res.data.status == 1;
                if (cipherTypeId === 1) {
                    Object.assign(cipherForm1, res.data);
                } else if (cipherTypeId === 2) {
                    console.log(res.data)

                    Object.assign(cipherForm2, res.data);
                    console.log(res.data)
                }
            })
        }
        onBeforeMount(() => {
            getCipherData();
        })
        const handleUpdateCipher = () => {
            let cipherForm;
            if (cipherTypeId === 1) {
                cipherForm = cipherForm1;
            } else if (cipherTypeId === 2) {
                cipherForm = cipherForm2;
            }
            updateCipher({
                id: cipherForm.id,
                typeId: cipherTypeId,
                status: cipherForm.status,
                config: JSON.stringify(cipherForm.config)
            }).then(res => {
                if (res.code === 200) {
                    ElMessage.success('修改成功')
                    getCipherData()
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }

        const handleClick = (tab, event) => {
            if ("configOne" === tab.props.name) {
                cipherTypeId = 1;
            } else if ("configTwo" === tab.props.name) {
                cipherTypeId = 2;
            }
            getCipherData();
        }
        return {
            activeTabName, disabled, cipherForm1, cipherForm2,
            handleUpdateCipher, handleClick
        };
    },
});
</script>

<style rel="stylesheet/scss" lang="scss">
.el-input {
    width: 200px;
}

.config-card {
    margin: 10px;
    text-align: start;
}
</style>
